<template>
  <view class="record-detail flexc">
    <view class="flex1 over cr">
      <template v-if="type == 0">
        <view class="wrap">
          <view class="status">{{ action[status].t }}</view>
          <view class="tip mtb">{{ action[status].des }}</view>
          <view class="tip">申请时间：{{ action[status].time }}</view>
        </view>
        <view class="wrap">
          <view class="title mb64">申请信息</view>
          <view class="content">
            <view class="flex-between">
              <view class="t">项目</view>
              <view class="t1">项目名</view>
            </view>
            <view class="flex-between">
              <view class="t">类型</view>
              <view class="t1">项目名</view>
            </view>
            <view class="flex-between">
              <view class="t">级别</view>
              <view class="t1">项目名</view>
            </view>
            <view class="flex-between">
              <view class="t">次第</view>
              <view class="t1">项目名</view>
            </view>
            <view class="flex-between">
              <view class="t">颁发证书单位</view>
              <view class="t1">项目名</view>
            </view>
            <view class="flex-between">
              <view class="t">获得时间</view>
              <view class="t1">项目名</view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="type == 1">
        <view class="wrap">
          <view class="status">{{ action1[status].t }}</view>
          <view class="tip mtb">{{ action1[status].des }}</view>
          <view class="tip">申请时间：{{ action1[status].time }}</view>
        </view>

        <view class="wrap" v-if="status == 1">
          <view class="title mb20">住宿通过</view>
          <view class="content">
            <view class="flex-between">
              <view class="t">通过时间</view>
              <view class="t1">项目名</view>
            </view>
            <view class="flex-between">
              <view class="t">分配宿舍</view>
              <view class="t1">项目名</view>
            </view>
          </view>
        </view>
        <view class="wrap">
          <view class="title mb20">申请内容</view>
          <view class="t1">内容</view>
        </view>
      </template>
    </view>
    <view class="footer" v-if="type == 1">
      <view class="">申请退宿</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      action: {
        0: {
          t: "待审核",
          des: "申请正在审核中，请耐心等待",
          time: "024/02/02",
        },
        1: {
          t: "已通过",
          des: "奖励申请已通过",
          time: "024/02/02",
        },
        2: {
          t: "已驳回",
          des: "奖励申请已驳回",
          time: "024/02/02",
        },
      },
      action1: {
        0: {
          t: "住宿申请",
          des: "申请正在审核中，请耐心等待",
          time: "024/02/02",
        },
        1: {
          t: "住宿通过",
          des: "住宿申请已通过",
          time: "024/02/02",
        },
        2: {
          t: "退宿审核",
          des: "申请正在审核中，请耐心等待",
          time: "024/02/02",
        },
        3: {
          t: "退宿通过",
          des: "退宿申请已通过",
          time: "024/02/02",
        },
        2: {
          t: "住宿申请·已驳回",
          des: "住宿申请已驳回",
          time: "024/02/02",
        },
      },
      status: 0, //不同的状态显示
      type: 0, //不同页面跳转过来的
    };
  },
  onLoad(options) {
    this.type = options?.type || 0;
    this.status = options?.status || 0;
  },
};
</script>

<style lang="scss" scoped>
.record-detail {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  .cr {
    background: #f6f6f6;
    padding: 24upx 32upx;
  }
  .footer {
    padding: 8upx 32upx;
    & > view {
      width: 686rpx;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      text-align: center;
      line-height: 80upx;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
  .wrap {
    padding: 34upx 24upx;
    margin-bottom: 24upx;
    background-color: #fff;
    .status {
      font-weight: bold;
      font-size: 28rpx;
      color: #f49c0d;
    }
    .tip {
      font-weight: 400;
      font-size: 20rpx;
      color: #666666;
    }
    .mtb {
      margin: 12upx 0 14upx;
    }
    .title {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }
    .mb64 {
      margin-bottom: 64upx;
    }
    .content {
      & > view {
        margin-bottom: 14upx;
      }
      & > view:last-child {
        margin-bottom: 0;
      }
      .t {
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }
      .t1 {
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
      .mb20 {
        margin-bottom: 20upx;
      }
    }
  }
}
</style>
